<template>
	<div>
		<div class="searchForm">
		    <div style="display: flex;">
		        <div>
					用户姓名/手机号：
				</div>
				<div>
					<selectUser @callEnter="search" ref="selectUser" @getUserId="getUserId"  />
				</div>
				<div style="margin-left: 20px;">
					物流单号：
				</div>
				<div>
					<el-input size="mini" 
						@keyup.enter.native="search"
						v-model="track_number" placeholder="请输入物流单号"></el-input>
				</div>
				<div style="margin-left: 10px;">
				    <el-button type="primary" size="mini" @click="search">检索</el-button>
				    <el-button size="mini" @click="clearSearch">重置/检索</el-button>
				</div>
		    </div>
		</div>
		<br>
		<el-table  :data="list"
			 border  
			 style="width: 100%"
			>
			<el-table-column   align="center"  label="用户手机号">
				<template slot-scope="scope">
				    {{scope.row.user_info.phone}}
				</template>
			</el-table-column>
			<el-table-column   align="center"  label="用户姓名">
				<template slot-scope="scope">
				    {{scope.row.user_info.name}}
				</template>
			</el-table-column>
			<el-table-column   align="center" width="180"   label="收款方式">
				<template slot-scope="scope">
					<span v-if="scope.row.bank_card_info.type==1">支付宝</span>
					<span v-if="scope.row.bank_card_info.type==3">微信</span> 
					<span v-if="scope.row.bank_card_info.type==2">{{scope.row.bank_card_info.bank_name}}</span>
					<br>
					<span>{{scope.row.bank_card_info.account_number}}</span>
				</template>
			</el-table-column>
			<el-table-column   align="center" width="200"  label="物流信息">
				<template slot-scope="scope">
					<div v-for="(el,i) in scope.row.tracking_number" :key="i">
						{{el.value}}
					</div>
				</template>
			</el-table-column>
			<el-table-column   align="center"    prop="run_info"  label="跑腿信息"></el-table-column>
			<el-table-column   align="center" width="400"  label="商品信息">
				<template slot-scope="scope">
					<div v-for="(el,i) in scope.row.goods_info" :key="i">
						{{el.value}}  <span style="color: red;">{{el.desc}}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column   align="center" width="180"   prop="add_time"    label="添加时间"></el-table-column>
			<!-- <el-table-column   align="center"    prop="update_time"    label="修改时间"></el-table-column> -->
			
			<el-table-column label="操作" align="center" width="200">
			    <template slot-scope="scope">
			        <div>
						<el-button type="text" @click="uplodeBill(scope.row)">上传账单</el-button>
						<el-button type="text" @click="lookBill(scope.row)">查看账单</el-button>
					</div>
			    </template>
			</el-table-column>
			
		</el-table>
		<div class="page">
		    <el-pagination
		            background
		            @size-change="pageChange"
		            @current-change="handleCurrentChange"
		            :current-page="page"
		            :page-size="pageSize"
		            layout="total, sizes, prev, pager, next, jumper"
		            :total="page_totle">
		    </el-pagination>
		</div>
		<el-dialog
		        :title="addTitle"
				:close-on-click-modal="false"
		        :visible.sync="formShow"
		        width="1000px"
		>
		  <div>
			  <el-form ref="form" label-width="80px">
				  <el-form-item label="系列说明">
						<el-input type="textarea" size="small" v-model="form.class_remark"
						></el-input>
				  </el-form-item>
				  <el-form-item >
				      <el-button type="primary" @click="confirm" size="small">确定</el-button>
				  </el-form-item>
			  </el-form>
		  </div>
		</el-dialog>
		
		<el-dialog
		        :title="addTitle"
				:close-on-click-modal="false"
				:modal-append-to-body="false"
				:append-to-body="true"
		        :visible.sync="uplodeBillShow"
		        width="1000px"
		>
		  <div>
			  <uplodeBill @close="uplodeBillShow=false" 
				v-if="uplodeBillShow"
				:uplodeBillMid="uplodeBillMid" />
		  </div>
		</el-dialog>
		
		<el-dialog
		        title="查看账单"
				:close-on-click-modal="false"
				:modal-append-to-body="false"
				:append-to-body="true"
		        :visible.sync="lookBillShow"
		        width="800px"
		>
		  <div style="max-height: 500px;overflow: auto;">
			  <div class="item" v-for="(el,i) in historyBill" :key="i">
			  	<div class="title" style="margin-bottom: 10px;">
			  		{{el.add_date}}
			  	</div>
			  	<div style="display: flex;">
			  		<div v-for="(item,ind) of el.children"
			  			:key="ind">
			  			<div class="flex">
							<el-image
								v-for="(element,index) in item.content" :key="index"
							    style="width: 100px; height: 100px;margin-right: 10px;"
							    :src="element"
							    :preview-src-list="[element]">
							</el-image>
			  			</div>
			  		</div>
			  	</div>
			  	
			  </div>
		  </div>
		</el-dialog>
		
	</div>
</template>

<script>
	import selectUser from '@/components/selectUser.vue';
	import uplodeBill from './components/uplodeBill.vue';
	export default {
		data(){
			return {
				title:"",
				page:1,
				pageSize:10,
				search_form:{
					class_name:'',
					brand_name:""
				},
				form:{
					id:null,
					class_remark:''
				},
				addTitle:'新增',
				isShow:false,
				table_name:'hs_class',
				mid:'',
				track_number:"",
				uplodeBillMid:0,
				uplodeBillShow:false,
				lookBillShow:false,
				historyBill:[]
			}
		},
		components:{
			selectUser,uplodeBill
		},
		mounted() {
			this.lodeList()
		},
		methods:{
			lookBill(row){
				let params = {
					mid:row.mid
				}
				this.$post('/user/lodeUserBill',params,res=>{
					for(let item of res.data.data){
						for(let ele of item.children){
							ele.content = JSON.parse(ele.content)
						}
					}
					this.historyBill = res.data.data
					this.lookBillShow = true
					console.log(this.historyBill)
				})
			},
			uplodeBill(row){
				console.log(row)
				this.uplodeBillMid = row.mid
				this.uplodeBillShow = true
			},
			getUserId(val){
				this.page = 1
				this.mid = val
			},
			clearSearch(){
				this.mid = ''
				this.page = 1
				this.$refs['selectUser'].mid = ''
				this.$refs['selectUser'].keywords = ''
				this.track_number = ''
				this.lodeList()
			},
			confirm(){
				this.$post('/prodectSys/editClass',this.form,res=>{
					if(res.data.code==200){
						this.$message.success('操作成功')
						this.formShow = false
						this.lodeList()
					}
				})
			},
			lodeList(){
				let params = {
					page:this.page,
					pageSize:this.pageSize,
					mid:this.mid,
					track_number:this.track_number
				}
			
				this.$post('/user/getbdList',params,res=>{
					let data = res.data.data
					this.page_totle = data.count
					for(let item of data.result){
						if(item.goods_info){
							item.goods_info = JSON.parse(item.goods_info)
						}else{
							item.goods_info = []
						}
						
						if(item.tracking_number){
							item.tracking_number = JSON.parse(item.tracking_number)
						}else{
							item.tracking_number = []
						}
					}
					this.list = data.result
				})
			},
		}
	}
</script>

<style>
</style>